<template>
	<view class="page">
		<view class="uni-box-head">
			<uni-title type="h1" align="center" title="排行榜"></uni-title>
		</view>

		<view class="table">
			<uni-table border stripe ref="table" emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">排名</uni-th>
					<uni-th align="center">昵称</uni-th>
					<uni-th align="center">卡牌数量</uni-th>
					<uni-th align="center">耗时</uni-th>
					<uni-th align="center">积分</uni-th>
					<uni-th align="center">时间</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">
						{{ index + 1 }}
					</uni-td>
					<uni-td align="center">{{item.username}}</uni-td>
					<uni-td align="center">{{item.card}}</uni-td>
					<uni-td align="center">{{item.cost}}s</uni-td>
					<uni-td align="center">{{item.score}}</uni-td>
					<uni-td align="center">{{item.gametime}}</uni-td>

				</uni-tr>

			</uni-table>
		</view>

	</view>


</template>

<script>
	export default {
		data() {
			return {
				tableData: []
			}
		},
		mounted() {
			this.getRank();
		},
		methods: {
			getRank() {
				uni.request({
					url: 'http://localhost:3000/api/user/getRank',
					method: 'GET',
					success: (res) => {
						console.log(JSON.stringify(res.data) + "bbb");
						this.tableData = res.data
						console.log(this.tableData);
					}
				});
			},

		}
	}
</script>


<style>
	.page {
		width: 100%;
		height: 100vh;
		background-image: url("https://pic.imgdb.cn/item/64994b5f1ddac507cc03af21.jpg");
		background-size: cover;
		background-position: center;
	
	}

	.table {
		width: 80%;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 0;
	}
</style>